<template>
  <v-col cols="12" md="4">
    <v-card>
      <v-card-title>历史数据</v-card-title>
      <v-card-text>
        <v-row>
          <v-simple-table>
            <template v-slot:default>
              <thead>
                <tr>
                  <th class="text-left">
                    序号
                  </th>
                  <th class="text-left">
                    输入答案
                  </th>
                  <th class="text-left">
                    显示结果
                  </th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(history, index) in histories" :key="index">
                  <td>{{ index + 1 }}</td>
                  <td>{{ history.Answer.Answer }}</td>
                  <td>{{ history.Response.Message }}</td>
                </tr>
              </tbody>
            </template>
          </v-simple-table>
        </v-row>
      </v-card-text>
    </v-card>
  </v-col>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { Get } from "vuex-pathify";
import { IHistory } from "@/model/History";

@Component({})
export default class History extends Vue {
  // region Prop
  // endregion
  // region Data
  // endregion
  // region computed
  @Get("NumGameState@Histories") histories!: IHistory[];
  // endregion
  // region watch
  // endregion
  // region method
  // endregion
  // region hook
  // endregion
}
</script>

<style lang="scss"></style>
